<!-- 公共材料定义：蹇泽阳 -->
<template>
  <div class="app-container">
    <JFind @clickNumber1="clickNumber1" :searchImg="false" :OriginalFilter="{ static: true }" :formList="formList1" @findClicked="findClicked" />

    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '5px 10px 5px' }">
      <div style="display: flex">
        <div>
          <h1>正式材料明细</h1>
          <Table
            :tableHeader="tableHeader"
            :tableData="tableData"
            :isLoading="isLoading"
            :getTableList="getTableList"
            @confirmChange="confirmChange"
            @checkboxChange="checkboxChange"
          />
        </div>
      </div>
    </el-card>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PublicMaterialDefinition1'
})
</script>
<script lang="ts" setup>
import { ref } from 'vue'
const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '分类名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称1',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称2',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称3',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'radio1',
    checkboxLabel: '公用材料',
    checked: false,
    label: '0'
  },
  {
    type: 'radio1',
    checkboxLabel: '非公用材料',
    checked: false,
    label: '1'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const tableHeader = ref([
  {
    change: true,
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    change: true,
    label: '分类名称',
    prop: 'typeName'
  },
  {
    change: true,
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    change: true,
    label: '材料名称',
    prop: 'mtlName',
    width: 190
  },
  {
    change: true,
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    change: true,
    label: '单位',
    prop: 'mtlUnit',
    width: 50
  },
  {
    change: true,
    label: '供应商',
    prop: 'vendor'
  },
  {
    change: true,
    label: '建档人员',
    prop: 'sysUser'
  },
  {
    label: '公用',
    type: 'checkbox',
    prop: 'publicFlag',
    width: 50
  }
])
// 表一模块
// 表一按钮
const findClicked = (content: string) => {
  if (content === '置空') {
    formList1.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}
const tableData = ref([])
const isLoading = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 表格计算函数

const clickNumber1 = (row: string) => {
  switch (row) {
    case '0': {
      listParms.value = '0'
      break
    }
    case '1': {
      listParms.value = '1'
      break
    }
  }
  getTableList()
}
const listParms = ref('0')

// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/mes/common/list', {
    mtlColor: formList1.value.find((item: any) => item.inputPlaceholder === '请输入颜色')?.inputValue,
    mtlName: formList1.value.find((item: any) => item.inputPlaceholder === '请输入名称1')?.inputValue,
    mtlName1: formList1.value.find((item: any) => item.inputPlaceholder === '请输入名称2')?.inputValue,
    mtlName2: formList1.value.find((item: any) => item.inputPlaceholder === '请输入名称3')?.inputValue,
    typeName: formList1.value.find((item: any) => item.inputPlaceholder === '请输入分类名称')?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    publicFlag: listParms.value //	有无欠数(Y/N)	string	body	true
  })
  isLoading.value = false
  tableData.value = tableDataList.rows.map((item: any) => {
    item.publicFlag === 'Y' ? (item.publicFlag = true) : (item.publicFlag = false)
    item.change = 'Y'
    return item
  })
  total.value = tableDataList.total
}, 500)
onMounted(() => {
  getTableList()
})
watch(formList1.value, () => {
  getTableList()
})

// 修改后点击确定按钮
const confirmChange = async (row: any, fn: any) => {
  const copyRow = JSON.parse(JSON.stringify(row))
  copyRow.publicFlag === true ? (copyRow.publicFlag = '0') : (copyRow.publicFlag = '1')
  let res = await LoginWork.put<any, any>('/mes/common/update', {
    mtlNo: copyRow.mtlNo,
    publicFlag: copyRow.publicFlag,
    safetyQty: copyRow.safetyQty
  })
  fn()
  if (res.code === 200) {
    JMessage.success('修改成功')
  }
}
// 修改公用
const checkboxChange = async (prop: any, row: any) => {
  const copyRow = JSON.parse(JSON.stringify(row))
  copyRow.publicFlag === true ? (copyRow.publicFlag = '0') : (copyRow.publicFlag = '1')
  let res = await LoginWork.put<any, any>('/mes/common/update', {
    mtlNo: copyRow.mtlNo,
    publicFlag: copyRow.publicFlag,
    safetyQty: copyRow.safetyQty
  })
  if (res.code === 200) {
    JMessage.success('修改成功')
  }
}
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}

table {
  table-layout: auto !important;
}

:deep(.el-table__header) {
  width: 100% !important;
}

:deep(.el-table__body) {
  width: 100% !important;
}
</style>
